<template>
	<div class="banner">
		<!-- 隐藏菜单 -->
		<div class="slider" :class="[{'default':show},'slider']">
			<p>
				<router-link to="/">登录</router-link>/<router-link to="/">注册</router-link>
			</p>
			<form class="search">
				<i class="iconfont">&#xe62d;</i>
				<input type="text" value="泰国"/>
			</form>
			<ul>
				<li v-for="item in menus" :key='item.id'>
					<router-link :to="item.url">{{item.name}}</router-link>
				</li>
			</ul>
		</div>
		<!-- 主界面 -->
		<div class="main">
			<!-- 顶部 -->
			<div class="banner-top">
				<!-- 城市切换 -->
				<div class="city">
<<<<<<< HEAD
					<label>北京</label><i class="iconfont">&#xe70f;</i>
=======
					<router-link to="/city">
						<label>{{cityName}}</label><i class="iconfont">&#xe70f;</i>
					</router-link>
>>>>>>> d0d9ac1 (首页)
				</div>
				<!-- 搜索 -->
				<form class="search">
					<i class="iconfont">&#xe62d;</i>
					<input type="text" value='泰国'/>
				</form>
				<!-- 导航按钮 -->
				<p class="slider-btn" @click="getShow()">
					<i class="iconfont">&#xe60d;</i>
				</p>
			</div>
			<!-- 轮播区域 -->
			<div class="swiper banner-swiper">
			  <ul class="swiper-wrapper">
			    <li class="swiper-slide" v-for="item in list" :key='item.id'>
<<<<<<< HEAD
					<img :src="item.imgURL" />
=======
					<img :src="require('@/'+item.imgURL)" />
>>>>>>> d0d9ac1 (首页)
				</li>
			  </ul>
			   
			   <div class="swiper-pagination"></div>
			</div>
		</div>
	</div>
</template>

<script>
<<<<<<< HEAD
=======
	
	import {mapState} from 'vuex'
	
>>>>>>> d0d9ac1 (首页)
	// 1.引入vue周期函数
	import {onMounted} from 'vue';
	//2.引入Swiper的动态组件
	 import Swiper,{
		 Autoplay,
		 EffectCoverflow,
		 EffectCube,
		 Pagination,
	 } from 'swiper';
	 
	 //3.swier组件应用配置
	 Swiper.use([ Autoplay, EffectCoverflow, EffectCube, Pagination,])
	 
	export default{
		name:'Banner',
<<<<<<< HEAD
		data(){
			return{
				menus : [
					{ id:1 , url:'/' , name:'首页' },
					{ id:2 , url:'/' , name:'游侠攻略' },
					{ id:3 , url:'/' , name:'视频' },
					{ id:4 , url:'/' , name:'游记' },
					{ id:5 , url:'/' , name:'目的地' },
					{ id:6 , url:'/' , name:'圈子' },
					{ id:7 , url:'/' , name:'集市' },
					{ id:8 , url:'/' , name:'民宿营地' },
					{ id:9 , url:'/' , name:'APP' },
				],
				list:[
					{id:1,imgURL:require('../../../assets/img/1.jpg') },
					{id:2,imgURL:require('../../../assets/img/2.jpg')},
					{id:3,imgURL:require('../../../assets/img/3.jpg')},
					{id:4,imgURL:require('../../../assets/img/4.jpg')},
					{id:5,imgURL:require('../../../assets/img/5.jpg')}
=======
		props:['propsbanner'],
		data(){
			return{
				menus : [
					// { id:1 , url:'/' , name:'首页' },
					// { id:2 , url:'/' , name:'游侠攻略' },
					// { id:3 , url:'/' , name:'视频' },
					// { id:4 , url:'/' , name:'游记' },
					// { id:5 , url:'/' , name:'目的地' },
					// { id:6 , url:'/' , name:'圈子' },
					// { id:7 , url:'/' , name:'集市' },
					// { id:8 , url:'/' , name:'民宿营地' },
					// { id:9 , url:'/' , name:'APP' },
				],
				list:[
					// {id:1,imgURL:require('../../../assets/img/1.jpg') },
					// {id:2,imgURL:require('../../../assets/img/2.jpg')},
					// {id:3,imgURL:require('../../../assets/img/3.jpg')},
					// {id:4,imgURL:require('../../../assets/img/4.jpg')},
					// {id:5,imgURL:require('../../../assets/img/5.jpg')}
>>>>>>> d0d9ac1 (首页)
				],
				show:false,
			}
		},
		methods:{
			getShow(){
				this.show=!this.show
			}
		},
		//4.设置应用swiper的位置
<<<<<<< HEAD
		setup(){
			onMounted(()=>{
				new Swiper('.banner-swiper',{
					//循环播放
					loop:true,
					// 设置分页器效果
					pagination:{
						el:'.swiper-pagination'
					},
					// 设置播放顶:时间，不停止，手指经过不暂停自动
					autoplay:{
						delay:3000,
						stopOnlastSlide:false,
						disableOnInteraction:false,
					}
				})
			})
=======
		updated() {
			new Swiper('.banner-swiper',{
				//循环播放
				loop:true,
				// 设置分页器效果
				pagination:{
					el:'.swiper-pagination'
				},
				// 设置播放顶:时间，不停止，手指经过不暂停自动
				autoplay:{
					delay:3000,
					stopOnlastSlide:false,
					disableOnInteraction:false,
				}
			})
		},
		watch:{
			propsbanner(){
				this.menus=this.propsbanner.BannerVueList
				this.list=this.propsbanner.BannerVueLong
			}
		},
		computed:{
			...mapState(['cityName']),
>>>>>>> d0d9ac1 (首页)
		}
	}
</script>

<style scoped>
<<<<<<< HEAD
=======
	a{
		text-decoration: none;
		color: white
	}
>>>>>>> d0d9ac1 (首页)
	.slider{
		position: absolute;
		left: -6.6rem;
		top: 0;
		z-index: 6;
		background-color: rgba(62,62,62,0.9);
		height: 100%;
		width: 6.6rem;
		/* display: none; */
		transition: all 1s;
	}
	.default{
		left: 0;
		transition: all 1s;
	}
	.slider a{
		text-decoration: none;
		color: white;
		padding-right: 0.1rem;
	}
	.slider p{
		line-height: 1.3rem;
		text-align: right;
		padding-right: 0.3rem;
		color: white;
		font-size: 0.3rem;
	}
	.slider .search i{
		display: inline-block;
		height: 100%;
		font-size: 0.45rem;
		padding-left: 0.2rem;
		vertical-align: middle;
		color: white;
	}
	.slider .search{
		background-color: #3a3a3a;
		border-radius: 0.1rem;
		overflow: hidden;
		line-height: 0.8rem;
		width: 90%;
		margin: 0.3rem auto;
	}
	.slider .search input{
		background-color: #3a3a3a;
		border: none;
		width: 80%;
		line-height: 0.8rem;
		text-indent: 1em;
		color:white ;
	}
	.slider ul{
		margin: 0.5rem auto 0;
		width: 95%;
		/* background-color: #FFDD40; */
	}
	.slider ul li{
		line-height: 1.3rem;
		text-align: left;
		border-top: 0.04rem solid black;
		text-indent: 1em;
		font-size: 0.35rem;
	}
	.slider ul li a{
		display: block;
	}
	.slider ul li:last-child{
		border-bottom: 0.04rem solid black;
	}
	.main{
		position: relative;
		width: 100%;
		background-color: #009798;
		height: 5.6rem;
	}
	.banner-swiper{
		width: 100%;
		height: 5.6rem;
	}
	.banner-top{
		position: absolute;
		left: 0;
		top: 0.3rem;
		z-index: 5;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 0.8rem;
	}
	.banner-top .city{
		color: white;
		font-size: 0.35rem;
		line-height: 0.8rem;
		padding-left: 0.3rem;
<<<<<<< HEAD
<<<<<<< HEAD
		padding-right: 0.4ewm;
=======
		padding-right: 0.4rem;
>>>>>>> 2fb73b0 (vue练习)
=======
		padding-right: 0.4rem;
>>>>>>> d0d9ac1 (首页)
		
	}
	.banner-top .city i{
		vertical-align: middle;
		padding-left: 0.1rem;
	}
	.banner-top .search i{
		height: 100%;
		font-size: 0.45rem;
		padding-left: 0.2rem;
		vertical-align: middle;
	}
	.banner-top .search{
		flex: 1;
		background-color: white;
		border-radius: 0.1rem;
		overflow: hidden;
		line-height: 0.8rem;
	}
	.banner-top .search input{
		border: none;
		width: 80%;
		line-height: 0.8rem;
		text-indent: 1em;
	}
	
	.banner-top .slider-btn{
		color: white;
		padding-left: 0.4rem;
		padding-right: 0.3rem;
		line-height: 0.8rem;
		vertical-align: middle;
	}
	.banner-swiper img{
		width: 100%;
		height: 100%;
	}
 	.swiper-pagination :deep(.swiper-pagination-bullet-active){
		background-color: #ffdd40;
	}
</style>
